<template>
    <view class="gy-radio" :class="{disabled: props.disabled, inline: props.inline, selected: props.modelValue === props.activeValue}" @click.stop="clickFn">
        <view class="gy-radio-icon" :class="props.modelValue === props.activeValue ? 'gy_icon_selected' : 'gy_icon_notSelected'"></view>
		<view class="gy-radio-label">
			<slot>{{ props.activeText }}</slot>
		</view>
    </view>
</template>

<script lang="ts" setup>

    const emits = defineEmits(["change", "update:modelValue"]);

    const props = defineProps({
        modelValue: {
        	type: [Boolean, String, Number]
        },
        disabled: {
        	type: Boolean,
        	default: false
        },
		inline: {
			type: Boolean,
			default: true
		},
		currentIndex: {
			type: Number,
			default: 0
		},
        activeValue: {
        	type: [Boolean, String, Number],
        	default: true
        },
        activeText: {
        	type: String,
        	default: "单选"
        },
		notActiveValue: {
			type: [Boolean, String, Number],
			default: true
		},
		cancelable: {
			type: Boolean,
			default: false
		}
    });

    function clickFn(){
    	if(!props.disabled){
			if(props.cancelable){
				if(props.modelValue === props.activeValue){
					emits('update:modelValue', props.notActiveValue);
				    emits('change', props.notActiveValue, props.currentIndex);
				}
				if(props.modelValue === props.notActiveValue){
					emits('update:modelValue', props.activeValue);
				    emits('change', props.activeValue, props.currentIndex);
				}
			}else{
				if(props.modelValue !== props.activeValue){
					emits('update:modelValue', props.activeValue);
				    emits('change', props.activeValue,props.currentIndex);
				}
			}
    	}
    }

</script>

<style lang="scss" scoped>
	.gy-radio{
	    @include flex-start-center;
	    padding: 8rpx 0;
		font-size: var(--gy-font-size-base);
		color: var(--gy-text-color-regular);
	    .gy-radio-icon{
	        color: var(--gy-text-color-regular);
	    }
		.gy-radio-label{
			margin-left: 10rpx;
		}
	}
	.gy-radio.selected{
		color: var(--gy-text-color-primary);
		.gy-radio-icon{
		    color: var(--gy-color-primary);
		}
	}
	.gy-radio.inline{
		@include flex-center-center;
		display: inline-flex;
		padding: 5rpx 15rpx;
	}
	.gy-radio.disabled{
	    opacity: 0.6;
	}
	
</style>